<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - RadioField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<h1>inputEx - RadioField Usage</h1>


<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Basic RadioField creation</h2>
	<p>Use the following code to create a basic inputEx RadioField.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.RadioField({
				label: 'Where did you learn about inputEx ?',
				name: 'example1',
				choices: [                    // choices: [       <- alternative syntax (shorter)
					{ value: 'Ajaxian' },     //    'Ajaxian',    <-
					{ value: 'YUI blog' },    //    'YUI blog',   <-
					{ value: 'Other' }        //    'Other'       <-
				],                            // ],               <-
				value:'Ajaxian',
				parentEl: 'container1'
			});
		</textarea>
	</div>
</div>

<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Differentiate choices' labels and values</h2>
	<p>Use the following code to create choices with labels different from values</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.RadioField({
				label: 'Where are you from ?',
				name: 'example2',
				choices: [                                                // no alternative syntax
					{ value: 'us', label: 'United States of America' },
					{ value: 'fr', label: 'France' }
				],
				parentEl: 'container2'
			});
		</textarea>
	</div>
</div>


<!-- Example 3 -->
<div class='exampleDiv'>
	<h2>Updated event</h2>
	<p>How to listen to the updated event :</p>
	<div class='demoContainer' id='container3'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		var el, field, button, val, logDiv;
		
		el = YAHOO.util.Dom.get('container3');
		field = new inputEx.RadioField({ name: 'example3', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: el });
		
		button = inputEx.cn('button', null, null, "SetValue with 'us'");
		el.appendChild(button);
		
		val = 'us';
		
		YAHOO.util.Event.addListener(button, "click" ,function() {
		   field.setValue(val);
		   val = (val == 'fr') ? 'us' : 'fr';
		   button.innerHTML = "SetValue with '"+val+"'";
		});
		
		logDiv = inputEx.cn('div', null, null, "Log :");
		el.appendChild(logDiv);
		
		field.updatedEvt.subscribe(function(e,params) {
			var value = params[0];
			logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
			logDiv.appendChild(inputEx.cn('br'));
		});
		</textarea>
	</div>
</div>

<!-- Example 4 -->
<div class='exampleDiv'>

	<h2>Styling RadioField</h2>
	
	<p>Display the choices vertically, style currently selected choice...</p>

	<div class='demoContainer' id='container4'></div>
	
	<style>
	  #container4 .inputEx-RadioField .inputEx-selected label { text-decoration: underline; }
	</style>
	
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.RadioField({
				label: 'Where did you learn about inputEx ?',
				display:'vertically',  // instead of default implicit "display:'inline'"
				name: 'example4',
				choices: ['Ajaxian','YUI blog','Other'],
				parentEl: 'container4'
			});
			
			// + CSS : underline selected choice
			//
			// <style>
			//   .inputEx-RadioField .inputEx-selected label { text-decoration: underline; }
			// </style>
		</textarea>
	</div>

</div>

<!-- Example 5 -->
<div class='exampleDiv'>
	<h2>allowAny option</h2>
	<p>The "allowAny" option adds a radio associated to a StringField to let the user enter any value.</p>
	<div class='demoContainer' id='container5'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var field2 = new inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example5', choices: ['Ajaxian','YUI blog'], parentEl: 'container5', allowAny: true});
			field2.updatedEvt.subscribe(function(e, params) {
					YAHOO.util.Dom.get('container5').appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]) );
			});
		</textarea>
	</div>
</div>

<!-- Example 6 -->
<div class='exampleDiv'>

	<h2>Advanced allowAny option</h2>
	
	<p>More options with allowAny (separators, default value, validator, etc.)</p>

	<style>
	#container6 div.inputEx-StringField-wrapper input {width: 25px;}
	</style>

	<div class='demoContainer' id='container6'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var field, el, button1, button2, button3;
			
			el = YAHOO.util.Dom.get('container6');
			
			field = new inputEx.RadioField({
				label: 'Would you like to receive an email reminder ?',
				name: 'example6',
				display: 'vertically',
				choices: [{ value: '0', label: 'No' }],
				value: '0', // default value, also used by clear() method
				parentEl: 'container6',
				allowAny: {
					separators:['Yes, ',' hours before the event'],
					value:'3', // default value for allowAny field, not for radioField
					validator: function(val) {
						var num = parseInt(val,10);
						return (val === ""+num && num >= 1 && num <= 48);
					}
				},
				messages: {invalid:"Hours should be between 1 and 48."},
				showMsg:true,
				required:true
			});
			
			field.updatedEvt.subscribe(function(e, params) {
					el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]) );
			});
			
			button1 = inputEx.cn('button', null, null, 'setValue("6")');
			el.appendChild(button1); 
			YAHOO.util.Event.addListener(button1, 'click', function() { field.setValue("6"); });
			
			button2 = inputEx.cn('button', null, null, 'getValue()');
			el.appendChild(button2); 
			YAHOO.util.Event.addListener(button2, 'click', function() { alert(field.getValue()); });
			
			button3 = inputEx.cn('button', null, null, 'clear()');
			el.appendChild(button3); 
			YAHOO.util.Event.addListener(button3, 'click', function() { field.clear(); });
			
			/* Style
			#container6 div.inputEx-StringField-wrapper input {width: 25px;}
			*/
		</textarea>
	</div>

</div>

<!-- Example 6 bis -->
<div class='exampleDiv'>

	<h2>Advanced allowAny option 2</h2>
	
	<p>Use a custom field in allowAny</p>

	<style>
	#container6bis div.inputEx-StringField-wrapper input {width: 25px;}
	</style>
	
	<div class='demoContainer' id='container6bis'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var field, el, button1, button2, button3;
			
			el = YAHOO.util.Dom.get('container6bis');
			
			field = new inputEx.RadioField({
				label: 'Would you like to receive an email reminder ?',
				name: 'example6',
				display: 'vertically',
				choices: [{ value: 0, label: 'No' }, { value: 1440, label: 'Yes, 1 day before the event (recommended)'}],
				value: 1440, // default value, also used by clear() method
				parentEl: el,
				allowAny: {
					field: {
						type: "timeinterval",
						unit: inputEx.TimeIntervalField.units.MINUTE, // return value in 'minutes'
						value: 7*24*60, // 1 week = 7 days,
						fields: [
							{type:'integer', value:1, required:true},
							{
								type: 'select',
								choices: [
									{ value: inputEx.TimeIntervalField.units.HOUR, label: inputEx.messages.timeUnits.HOUR },
									{ value: inputEx.TimeIntervalField.units.DAY, label: inputEx.messages.timeUnits.DAY },
									{ value: inputEx.TimeIntervalField.units.MONTH, label: inputEx.messages.timeUnits.MONTH }
								]
							}
						],
						separators:['Yes, ',false, ' before the event']
					},
					validator: function(val) {
						return (val >= 120 && val <= 43200);
					}
				},
				required:true,
				messages: {invalid:"Reminder can be set between 2 hours and 1 month before the event"},
				showMsg:true
			});
			
			field.updatedEvt.subscribe(function(e, params) {
					el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]+" (minutes)") );
			});
			
		</textarea>
	</div>

</div>



<!-- Example 7 -->
<div class='exampleDiv'>
	<h2>Disable RadioField</h2>
	<p>Disable the field (to disable radio inputs individually, see another example below)</p>
	<div class='demoContainer' id='container7'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var el, field, button1, button2;
			
			el = YAHOO.util.Dom.get('container7');
			field = new inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example7', choices: ['Ajaxian','YUI blog','Other'], value:'Ajaxian', parentEl: el});
			
			button1 = inputEx.cn('button', null, null, 'disable()');
			el.appendChild(button1); 
			YAHOO.util.Event.addListener(button1, 'click', function() { field.disable(); });

			button2 = inputEx.cn('button', null, null, 'enable()');
			el.appendChild(button2); 
			YAHOO.util.Event.addListener(button2, 'click', function() { field.enable(); });
			
		</textarea>
	</div>
</div>

<!-- Example 8 -->
<div class='exampleDiv'>
	<h2>addChoice</h2>
	<p>Add choices dynamically</p>
	<div class='demoContainer' id='container8'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var el, field, button1, button2, button3, logDiv;
			
			el = YAHOO.util.Dom.get('container8');
			field = new inputEx.RadioField({name: 'example8', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el});
			
			button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')");
			YAHOO.util.Event.addListener(button1, "click" ,function() {
				field.addChoice({value:"Spain",selected:true});
				button1.disabled = true;
			});
			
			button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1");
			YAHOO.util.Event.addListener(button2, "click" ,function() {
				field.addChoice({value:"uk",label:"United Kingdom",position:1});
				button2.disabled = true;
			});
			
			button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice");
			YAHOO.util.Event.addListener(button3, "click" ,function() {
				field.addChoice({value:"Sweden",after:"France"});
				button3.disabled = true;
			});
			
			el.appendChild(button1);
			el.appendChild(button2);
			el.appendChild(button3);
			
			logDiv = inputEx.cn('div', null, null, "Log : ");
			el.appendChild(logDiv);
			
			field.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
				logDiv.appendChild(inputEx.cn('br'));
			});
		</textarea>
	</div>
</div>

<!-- Example 9 -->
<div class='exampleDiv'>
	<h2>removeChoice</h2>
	<p>Remove choices dynamically</p>
	<div class='demoContainer' id='container9'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var el, field, button1, button2, button3, logDiv;
			
			el = YAHOO.util.Dom.get('container9');
			field = new inputEx.RadioField({
				name: 'example9',
				choices: [
					{ value: 'usa', label: 'United States of America' },
					{ value: 'de', label: 'Germany' },
					{ value: 'uk', label: 'United Kingdom' },
					{ value: 'fr', label: 'France' },
					{ value: 'se', label: 'Sweden' },
					{ value: 'es', label: 'Spain' }
				],
				parentEl: el
			});
			
			button1 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
			YAHOO.util.Event.addListener(button1, "click", function() {
			   field.removeChoice({label:"Spain"});
			   button1.disabled = true;
			});
			
			button2 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)");
			YAHOO.util.Event.addListener(button2, "click", function() {
			   field.removeChoice({value:"uk"});
			   button2.disabled = true;
			});
			
			button3 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)");
			YAHOO.util.Event.addListener(button3, "click", function() {
			   field.removeChoice({position:1});
			   button3.disabled = true;
			});
			
			el.appendChild(button1);
			el.appendChild(button2);
			el.appendChild(button3);
			
			logDiv = inputEx.cn('div', null, null, "Log : ");
			el.appendChild(logDiv);
			
			field.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
				logDiv.appendChild(inputEx.cn('br'));
			});
		</textarea>
	</div>
</div>

<!-- Example 10 -->
<div class='exampleDiv'>
	<h2>Hide / Show / Disable / Enable choice</h2>
	<p>Hide, show, disable or enable an choice in the selector, without removing it totally, and keeping the original choice's order</p>
	<p style="font-size:90%;padding-top:3px;">Note : disableChoice and enableChoice methods have no effect with IE &lt; 8 because it did not support disabled="disabled" attribute.</p>
	<div class='demoContainer' id='container10'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		var el, field, button1, button2, button3, button4, logDiv;
		
		el = YAHOO.util.Dom.get('container10');
		field = new inputEx.RadioField({name: 'example10', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: el});
		
		button1 = inputEx.cn('button', null, null, "Hide choice 'France'"); el.appendChild(button1);
		button2 = inputEx.cn('button', null, null, "Show choice 'France'"); el.appendChild(button2);
		button3 = inputEx.cn('button', null, null, "Disable choice 'Spain'"); el.appendChild(button3);
		button4 = inputEx.cn('button', null, null, "Enable choice 'Spain'"); el.appendChild(button4);
		
		logDiv = inputEx.cn('div', null, null, "Log :");
		el.appendChild(logDiv);
		
		field.updatedEvt.subscribe(function(e,params) {
			var value = params[0];
			logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
			logDiv.appendChild(inputEx.cn('br'));
		});
		
		
		YAHOO.util.Event.addListener(button1, "click" ,function() {
			
			field.hideChoice({value:'fr'});
			
			logDiv.innerHTML += "[INFO] Hide choice 'France' (current value : "+field.getValue()+")";
			logDiv.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button2, "click" ,function() {
			
			field.showChoice({value:'fr'});
			
			logDiv.innerHTML += "[INFO] Show choice 'France' (current value : "+field.getValue()+")";
			logDiv.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button3, "click" ,function() {
			
			field.disableChoice({label:'Spain'});
			
			logDiv.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field.getValue()+")";
			logDiv.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button4, "click" ,function() {
			
			field.enableChoice({label:'Spain'});
			
			logDiv.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field.getValue()+")";
			logDiv.appendChild(inputEx.cn('br'));
		});
		
		</textarea>
	</div>
</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/selector/selector-min.js"></script>
<script type="text/javascript" src="../lib/yui/event-delegate/event-delegate-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/mixins/choice.js"  type='text/javascript'></script>
<script src="../js/fields/RadioField.js"  type='text/javascript'></script>

<!-- For TimeIntervalField use only -->
<script src="../js/Group.js"  type='text/javascript'></script>
<script src="../js/fields/IntegerField.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../js/fields/CombineField.js"  type='text/javascript'></script>
<script src="../js/fields/TimeIntervalField.js"  type='text/javascript'></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>